/**
 * field_color
 */
layui.define(['YunjField'], function (exports) {

    let YunjField = layui.YunjField;

    class YunjFieldColor extends YunjField {

        constructor(options = {}) {
            super(options);
            this.color_action_box=null; // 颜色控制
            this.color_input_el=null;   // 颜色输入框
            this.color_show_el=null;    // 颜色句柄
        }

        defineExtraArgs(){
            let that = this;
            return {
                disabled:false
            };
        }

        layoutControl() {
            let that = this;
            let controlHtml = `<div class="field-color-box">
                                    <div class="field-color-action-box" title="${that.args.disabled?'禁用':'选择/编辑颜色'}">
                                        <input type="text" class="layui-input field-color-action-input" readonly maxlength="7" autocomplete="off">
                                        <span class="field-color-action-show"></span>
                                    </div>
                                </div>`;
            return `<div class="layui-input-inline yunj-input-inline">${controlHtml}</div>`;
        }

        async renderBefore() {
            let that = this;
            if(that.args.disabled) return 'done';
            await yunj.include_css('/static/yunj/libs/colpick/colpick.css');
            await yunj.include_js(`/static/yunj/libs/colpick/colpick.js?v=${YUNJ_VERSION}`);
            return 'done';
        }

        renderDone() {
            let that = this;

            that.color_action_box=that.fieldBoxEl.find('.field-color-action-box');
            that.color_input_el=that.fieldBoxEl.find('.field-color-action-input');
            that.color_show_el=that.fieldBoxEl.find('.field-color-action-show');

            if(that.args.disabled) return false;
            that.color_action_box.colpick({
                layout:'hex',
                submit:0,
                colorScheme:'dark',
                onChange:function(hsb,hex,rgb,el,bySetColor) {
                    that.set_color(`#${hex}`);
                }
            })
        }

        setValue(val = '') {
            let that = this;
            that.set_color(val);
            if(that.args.disabled) return false;
            that.color_action_box.colpickSetColor(val);
        }

        getValue() {
            let that = this;
            return that.color_input_el.val();
        }

        set_color(val){
            let that = this;
            that.color_input_el.val(val);
            that.color_show_el.css('backgroundColor',val);
        }

    }

    exports('field_color', YunjFieldColor);
});